<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
var departmentUserDataGrid = $('#department-user-datagrid-json').datagrid({
    gridTitle : '部门【${department.departmentName}】下的员工',
    showToolbar: false,
    toolbarItem: '',
    filterThead: false,
    filterAll: true,
    sortAll : true,
    dataUrl: 'department/stafflist.do?departmentSn=${department.departmentSn}',
    dataType: 'json',
    columns: [
        {
            name: 'staffNo',
            label: '员工编号',
            align: 'center',
            width: 100,
            rule: 'required'
        },
        {
            name: 'name',
            label: '员工姓名',
            align: 'center',
            width: 100,
            rule: 'required'
        },
        {
            name: 'sex',
            label: '性别',
            type : 'select',
            items: [{'M':'男'}, {'F':'女'}],
            align: 'center',
            width: 60,
            render: $.datagrid.renderItem
        },
        {
            name: 'email',
            label: '邮箱',
            align: 'center',
            width: 180,
            rule: 'length[~50]'
        },
        {
        	name: 'positionName',
            label: '职位',
            align: 'center',
            width: 120
        },
        {
            name: 'userStatus',
            label: '员工状态',
            type : 'select',
            items: [{'0':'试用'}, {'1':'正式'}, {'2':'离职'}],
            align: 'center',
            width: 80,
            render: $.datagrid.renderItem
        }
    ],
    paging: {pageSize:20, selectPageSize:'20,30,40'},
    showTfoot: true,
    fullGrid: true
});

function updateDepartment() {
	$('#department_form').isValid(function(v) {
		if(v){
			var url = "department/update.do";
			var data = $('#department_form').serialize();
			var successCallBack = function(result){
				syncDepartmentTree();
				$("#department_form").alertmsg('info', result.message);
			}
			var failCallBack = null;
			var errorCallBack = null;
			myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
		 }
	 });
}
</script>

<div style="width: 99%;">
<form action="department/update.do" id="department_form" data-toggle="validate" data-alertmsg="false">
<input type="hidden" name="departmentSn" id="t_department_sn" value="${department.departmentSn}">
	<button class="btn btn-default save" data-icon="save" onclick="updateDepartment();">保存</button>
	<div class="clearfix">
		<ul style='margin-top: 10px;margin-bottom: 10px;'>
        	<li style='float:left;margin-bottom: 10px;'>
        		<div style="width:350px;">
        			<label for="t_department_no" class="control-label x100">部门编号：</label>
        			<input type="text" name="departmentNo" id="t_department_no" value="${department.departmentNo}" 
        				<c:if test="${isParent==true}">readonly="readonly"</c:if>
        				data-rule="required;length[~32];jsvalide" size="20">
        		</div>
        	</li>
        	<li style='float:left;margin-bottom: 10px;'>
        		<div style="width:350px;">
        			<label for="t_department_name" class="control-label x100">部门名称：</label>
        			<input type="text" name="departmentName" id="t_department_name" value="${department.departmentName}" data-rule="required;length[~50];jsvalide" size="20">
        		</div>
        	</li>
        	<li style='float:left;margin-bottom: 10px;'>
        		<div style="width:350px;">
        			<label for="t_show_index" class="control-label x100">显示顺序：</label>
        			<input type="text" name="showIndex" id="t_show_index" value="${department.showIndex}" data-rule="required;number;length[~10];jsvalide" size="20">
        		</div>
        	</li>
        	<li style='float:left;margin-bottom: 10px;'>
        		<div style="width:350px;">
        			<label for="t_department_desc" class="control-label x100">部门描述：</label>
        			<input type="text" name="departmentDesc" id="t_department_desc" value="${department.departmentDesc}" data-rule="length[~100];jsvalide" size="20">
        		</div>
        	</li>
        </ul>
    </div>
</form>
</div>
<div style="width: 99%; height: 76%; overflow: auto;">
	<div style="height:100%; width:100%;">
		<table id="department-user-datagrid-json" data-width="100%" data-height="100%" class="table table-bordered">
 		</table>
	</div>
</div>